<template>
  <div class="project-container">
    <!-- 前端配置信息 -->
    <el-card class="config-card">
      <div slot="header" class="card-header" @click="toggleFrontend">
        <span class="card-title">
          <i class="el-icon-s-platform"></i>
          前端项目配置
          <i :class="['el-icon-arrow-down', {'is-active': !frontendCollapsed}]"></i>
        </span>
      </div>
      
      <el-collapse-transition>
        <div v-show="!frontendCollapsed">
          <!-- 项目基本信息 -->
          <div class="section-title">项目信息</div>
          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">项目名称：</span>
                <el-tag type="success">{{ projectInfo.name }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">技术栈：</span>
                <el-tag type="primary">Vue.js</el-tag>
                <el-tag type="warning" style="margin-left: 8px">Element UI</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">Node版本：</span>
                <el-tag type="info">{{ projectInfo.nodeVersion }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">包管理器：</span>
                <el-tag type="danger">{{ projectInfo.packageManager }}</el-tag>
              </div>
            </el-col>
          </el-row>

          <!-- 核心依赖 -->
          <div class="section-title">
            <i class="el-icon-star-on"></i>
            核心依赖
          </div>
          <el-table :data="coreDependencies" style="width: 100%" border>
            <el-table-column prop="name" label="依赖名称" width="180">
              <template slot-scope="scope">
                <el-tag type="primary">{{ scope.row.name }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="version" label="版本" width="120">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.version }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述">
              <template slot-scope="scope">
                <span class="dependency-desc">{{ scope.row.description }}</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- 开发依赖 -->
          <div class="section-title">
            <i class="el-icon-s-tools"></i>
            开发依赖
          </div>
          <el-table :data="devDependencies" style="width: 100%" border>
            <el-table-column prop="name" label="依赖名称" width="180">
              <template slot-scope="scope">
                <el-tag type="warning">{{ scope.row.name }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="version" label="版本" width="120">
              <template slot-scope="scope">
                <el-tag type="info">{{ scope.row.version }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述">
              <template slot-scope="scope">
                <span class="dependency-desc">{{ scope.row.description }}</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- 构建配置 -->
          <div class="section-title">
            <i class="el-icon-setting"></i>
            构建配置
          </div>
          <el-row :gutter="20" class="info-row">
            <el-col :span="24">
              <div class="info-item">
                <span class="info-label">构建命令：</span>
                <el-tag type="success">npm run build</el-tag>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="info-item">
                <span class="info-label">开发服务器：</span>
                <el-tag type="primary">npm run dev</el-tag>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="info-item">
                <span class="info-label">代码检查：</span>
                <el-tag type="warning">npm run lint</el-tag>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </el-card>

    <!-- 后端配置信息 -->
    <el-card class="config-card">
      <div slot="header" class="card-header" @click="toggleBackend">
        <span class="card-title">
          <i class="el-icon-s-platform"></i>
          后端项目配置
          <i :class="['el-icon-arrow-down', {'is-active': !backendCollapsed}]"></i>
        </span>
      </div>

      <el-collapse-transition>
        <div v-show="!backendCollapsed">
          <!-- 基本信息 -->
          <div class="section-title">基本信息</div>
          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">运行状态：</span>
                <el-tag :type="djangoInfo.status === 'ok' ? 'success' : 'danger'">
                  {{ djangoInfo.status }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">调试模式：</span>
                <el-tag :type="djangoInfo.debug ? 'warning' : 'info'">
                  {{ djangoInfo.debug ? '开启' : '关闭' }}
                </el-tag>
              </div>
            </el-col>
          </el-row>

          <!-- 数据库配置 -->
          <div class="section-title">
            <i class="el-icon-coin"></i>
            数据库配置
          </div>
          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">数据库引擎：</span>
                <el-tag type="primary">{{ djangoInfo.database.engine }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">数据库名称：</span>
                <el-tag type="success">{{ djangoInfo.database.name }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">主机地址：</span>
                <el-tag type="info">{{ djangoInfo.database.host }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">端口：</span>
                <el-tag type="warning">{{ djangoInfo.database.port }}</el-tag>
              </div>
            </el-col>
          </el-row>

          <!-- Redis配置 -->
          <div class="section-title">
            <i class="el-icon-connection"></i>
            Redis配置
          </div>
          <el-row :gutter="20" class="info-row">
            <el-col :span="24">
              <div class="info-item">
                <span class="info-label">Redis地址：</span>
                <el-tag type="danger">{{ djangoInfo.redis.location }}</el-tag>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="info-item">
                <span class="info-label">Session地址：</span>
                <el-tag type="danger">{{ djangoInfo.redis.session_location }}</el-tag>
              </div>
            </el-col>
          </el-row>

          <!-- JWT配置 -->
          <div class="section-title">
            <i class="el-icon-key"></i>
            JWT配置
          </div>
          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">访问令牌有效期：</span>
                <el-tag type="success">{{ djangoInfo.jwt.access_token_lifetime }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">刷新令牌有效期：</span>
                <el-tag type="success">{{ djangoInfo.jwt.refresh_token_lifetime }}</el-tag>
              </div>
            </el-col>
          </el-row>

          <!-- 已安装应用 -->
          <div class="section-title">
            <i class="el-icon-menu"></i>
            已安装应用
          </div>
          <el-table :data="djangoInfo.installed_apps" style="width: 100%" border>
            <el-table-column prop="name" label="应用名称">
              <template slot-scope="scope">
                <el-tag type="primary">{{ scope.row }}</el-tag>
              </template>
            </el-table-column>
          </el-table>

          <!-- 中间件 -->
          <div class="section-title">
            <i class="el-icon-s-operation"></i>
            中间件
          </div>
          <el-table :data="djangoInfo.middleware" style="width: 100%" border>
            <el-table-column prop="name" label="中间件名称">
              <template slot-scope="scope">
                <el-tag type="warning">{{ scope.row }}</el-tag>
              </template>
            </el-table-column>
          </el-table>

          <!-- 本地化配置 -->
          <div class="section-title">
            <i class="el-icon-location"></i>
            本地化配置
          </div>
          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">语言：</span>
                <el-tag type="info">{{ djangoInfo.locale.language_code }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">时区：</span>
                <el-tag type="info">{{ djangoInfo.locale.time_zone }}</el-tag>
              </div>
            </el-col>
          </el-row>

          <!-- Python包 -->
          <div class="section-title">
            <i class="el-icon-box"></i>
            Python包
          </div>
          <el-table :data="djangoInfo.pip_packages.installed_packages" style="width: 100%" border>
            <el-table-column prop="name" label="包名称" width="180">
              <template slot-scope="scope">
                <el-tag type="primary">{{ scope.row.name }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="version" label="版本" width="120">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.version }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>
import packageJson from '../../../package.json'
import { getDjangoInfo } from '@/api/opration'

export default {
  name: 'Project',
  data() {
    // 安全地获取Node版本
    const nodeVersion = process && process.versions ? process.versions.node : '未知'
    
    // 安全地获取依赖信息
    const dependencies = packageJson.dependencies || {}
    const devDependencies = packageJson.devDependencies || {}

    return {
      projectInfo: {
        name: packageJson.name || 'fs-element-admin',
        version: packageJson.version || '1.0.0',
        nodeVersion: nodeVersion,
        packageManager: 'npm'
      },
      coreDependencies: Object.entries(dependencies).map(([name, version]) => ({
        name,
        version,
        description: this.getPackageDescription(name)
      })),
      devDependencies: Object.entries(devDependencies).map(([name, version]) => ({
        name,
        version,
        description: this.getPackageDescription(name)
      })),
      djangoInfo: {
        status: '',
        debug: false,
        database: {
          engine: '',
          host: '',
          port: '',
          name: ''
        },
        redis: {
          location: '',
          session_location: ''
        },
        jwt: {
          access_token_lifetime: '',
          refresh_token_lifetime: ''
        },
        installed_apps: [],
        middleware: [],
        locale: {
          language_code: '',
          time_zone: ''
        },
        pip_packages: {
          installed_packages: []
        }
      },
      frontendCollapsed: false,
      backendCollapsed: false
    }
  },
  created() {
    this.fetchDjangoInfo()
  },
  methods: {
    getPackageDescription(name) {
      const descriptions = {
        'vue': '渐进式JavaScript框架',
        'vue-router': 'Vue.js官方路由管理器',
        'vuex': 'Vue.js的状态管理模式',
        'element-ui': '基于Vue的组件库',
        'axios': '基于Promise的HTTP客户端',
        '@vue/cli-service': 'Vue CLI的核心服务',
        'sass': 'CSS预处理器',
        'sass-loader': 'Sass加载器',
        'babel-loader': 'JavaScript编译器',
        'eslint': '代码检查工具'
      }
      return descriptions[name] || '暂无描述'
    },
    async fetchDjangoInfo() {
      try {
        const response = await getDjangoInfo()
        if (response) {
          this.djangoInfo = response
        }
      } catch (error) {
        console.error('获取Django信息失败:', error)
        this.$message.error('获取Django信息失败')
      }
    },
    toggleFrontend() {
      this.frontendCollapsed = !this.frontendCollapsed
    },
    toggleBackend() {
      this.backendCollapsed = !this.backendCollapsed
    }
  }
}
</script>

<style lang="scss" scoped>
.project-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .config-card {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .card-header {
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      
      .card-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        display: flex;
        align-items: center;
        i {
          margin-right: 8px;
          font-size: 18px;
          color: #409EFF;
        }
      }

      .el-icon-arrow-down {
        margin-left: 8px;
        transition: transform 0.3s;
        
        &.is-active {
          transform: rotate(180deg);
        }
      }
    }
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin: 20px 0;
    display: flex;
    align-items: center;
    
    i {
      margin-right: 8px;
      font-size: 18px;
      color: #409EFF;
    }
  }

  .info-row {
    margin-bottom: 20px;
  }

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    .info-label {
      width: 100px;
      font-weight: bold;
      color: #606266;
    }
  }

  .dependency-desc {
    color: #606266;
    font-size: 14px;
  }

  ::v-deep .el-table {
    margin-bottom: 20px;
    
    .el-tag {
      display: inline-flex;
      align-items: center;
    }
  }
}
</style>
